<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2025-04-02 16:28:42
 * @LastEditors: jqm123 2289662078@qq.com
 * @LastEditTime: 2025-08-07 17:12:37
 * @FilePath: my.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { ref, computed, onActivated } from 'vue'
import { useUserStore } from '@/stores/user.store.js'
import { useCommonStore } from "@/stores/common.store.js"
import { useRouter } from 'vue-router'
import { showDialog } from "vant"
import api from "@/api/api"
import vipIcon from '@/assets/my/vip.png'
import carIcon from '@/assets/my/car.png'
import customerIcon from '@/assets/my/customer.png'
import weiquanIcon from '@/assets/my/weiquan.png'
import qbIcon from '@/assets/my/qb.jpg'


// 动态导入订单图标
const orderIcons = {
  dfk: new URL('@/assets/my/dfk.png', import.meta.url).href,
  dpj: new URL('@/assets/my/dpj.png', import.meta.url).href,
  ywc: new URL('@/assets/my/ywc.png', import.meta.url).href,
  sh: new URL('@/assets/my/sh.png', import.meta.url).href,
}

// 使用 store 和 router
const userStore = useUserStore()
const commonStore = useCommonStore()
const router = useRouter()

// 响应式数据
const showCarList = ref(false)
const radio = ref(0)
const deleteIndex = ref(-1)

const orderList = [
  {
    title: "待付款",
    icon: "dfk",
    id: 0,
  },
  {
    title: "待服务",
    icon: "dpj",
    id: 31,
  },
  {
    title: "已完成",
    icon: "ywc",
    id: 100,
  },
  {
    title: "退款/售后",
    icon: "sh",
    id: 4,
  },
]

// 计算属性
const userData = computed(() => userStore.userData)
const carList = computed(() => userStore.carList)
const currentCarIndex = computed(() => commonStore.currentCarIndex)

const name = computed(() => {
  return userData.value.userName
    ? userData.value.userName[0] +
    "*".repeat(Math.max(userData.value.userName.length - 1, 0))
    : ""
})

const hasCar = computed(() => carList.value.length > 0)

const carInfo = computed(() => {
  return carList.value.length > 0 ? carList.value[currentCarIndex.value] : {}
})

// 方法
const addCar = () => {
  router.push({
    path: "/addCar",
  })
}

const goToOrder = (id) => {
  router.push({
    path: "/order",
    query: {
      id,
    },
  })
}

const setting = () => {
  router.push({
    path: "/setting",
  })
}

const selectCar = (item, i) => {
  commonStore.setIndex(i)
  showCarList.value = false
}

const editCar = (item, i) => {
  router.push({
    path: "/addCar",
    query: {
      id: item.id,
      type: "edit",
    },
  })
}

const delCar = (item, i) => {
  deleteIndex.value = { item, i }
  console.log(deleteIndex.value)
}

const beforeClose = ({ position, instance }) => {
  if (position === "right") {
    showDialog({
      message: "确定删除吗?",
    }).then(async () => {
      await api.user.delCarInfo({ id: deleteIndex.value.item.id })
      let res2 = await api.user.getCarList({})
      userStore.setCarList(res2.data)

      if (carList.value.length === 0) {
        commonStore.setIndex(-1)
      }

      if (currentCarIndex.value === deleteIndex.value.id) {
        if (carList.value.length > 0) {
          commonStore.setIndex(0)
          radio.value = 0
        }
      }

      instance.close()
    }).catch(() => {
      // 取消操作
    })
  }
}

// 生命周期
onActivated(() => {
  radio.value = Number(currentCarIndex.value)
})
</script>

<template>
  <div class="home my">
    <div class="top">
      <div class="left">
        <van-image class="avatar" round :src="userData.avatar" />
        <div class="username">{{ name || "掌心用户" }}</div>
        <van-image v-if="userData.isVip" class="vip_icon" :src="vipIcon" />
      </div>
      <div class="right">
        <van-icon name="setting" @click="setting" />
      </div>
    </div>
    <div class="order">
      <div class="title">
        <div class="order_text_1">我的订单</div>
        <div class="order_text_2" @click="goToOrder(-1)">全部订单></div>
      </div>
      <div class="order_item">
        <van-grid :column-num="4" :border="false">
          <van-grid-item v-for="(v, i) in orderList" :key="i" @click="goToOrder(v.id)">
            <template #text>
              <span class="order_item_title">{{ v.title }}</span>
            </template>
            <template #icon>
              <van-image class="vip_icon" :src="orderIcons[v.icon]" />
            </template>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <div v-if="!hasCar" class="car">
      <div class="car_title">我的爱车</div>
      <div class="add_btn" @click="addCar">+添加爱车 享专属服务</div>
    </div>

    <div class="car_box">
      <div class="car_title">我的爱车</div>
      <div v-if="hasCar" class="car_2">
        <div class="left">
          <div class="car_icon">
            <van-image width="100%" height="100%" :src="carIcon" />
          </div>
          <span class="car_name">{{ carInfo.brand }}</span>
        </div>
        <div class="right" @click="showCarList = true">
          <span class="text_2" :style="{ color: '#989898' }">车辆管家></span>
        </div>
      </div>
    </div>

    <div class="more">
      <div class="more_title">更多服务</div>
      <div class="more_grid">
        <van-grid :column-num="3" :border="false">
          <van-grid-item text="联系客服" to="/customer">
            <template #icon>
              <van-image class="grid_icon" :src="customerIcon" />
            </template>
          </van-grid-item>
          <van-grid-item text="我的维权" to="/myWeiquan">
            <template #icon>
              <van-image class="grid_icon" :src="weiquanIcon" />
            </template>
          </van-grid-item>
          <van-grid-item text="我的券包" to="/coupon">
            <template #icon>
              <van-image class="grid_icon" :src="qbIcon" />
            </template>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <van-action-sheet v-model:show="showCarList" get-container=".my" title="更换车辆" :closeable="false">
      <div class="content">
        <van-radio-group v-model="radio">
          <van-cell-group>
            <van-swipe-cell v-for="(v, i) in carList" :key="i" :before-close="beforeClose">
              <van-cell @click="selectCar(v, i)">
                <template #title>
                  <div class="title_cell">
                    <van-radio :name="i" />
                    <span class="car_name_2">{{ v.brand }}</span>
                  </div>
                </template>
                <template #right-icon>
                  <van-icon name="edit" @click.stop="editCar(v, i)" />
                </template>
              </van-cell>
              <template #right>
                <van-button square text="删除" type="danger" @click="delCar(v, i)" />
              </template>
            </van-swipe-cell>
          </van-cell-group>
        </van-radio-group>
        <van-empty v-if="carList.length === 0" description="暂无车辆" />
        <div class="add_btn">
          <van-button icon="plus" type="info" block round @click="addCar">添加车型
          </van-button>
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>


<style lang="less" scoped>
.home {
  min-height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/44dea588672142d48f873df92c7b625e.jpg") no-repeat;
  background-size: contain;
  background-attachment: fixed;
  background-position: top;
  box-sizing: border-box;
  padding: 100px 50px 150px 50px;
  background-color: #fff;

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;

      .avatar {
        width: 130px !important;
        height: 130px !important;
      }

      .username {
        font-size: 52px;
        color: #fff;
        margin: 0 30px;
        font-weight: bold;
      }

      .vip_icon {
        width: 61px;
        height: 49px;
      }
    }

    .right {
      font-size: 60px;
      color: #fff;
    }
  }

  .order {
    padding: 40px 50px;
    background: #fff;
    border-radius: 30px;
    margin-top: 25px;

    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .order_text_1 {
        font-size: 50px;
      }

      .order_text_2 {
        font-size: 38px;
        color: #909090;
      }
    }

    .order_item {
      .order_item_title {
        font-size: 40px;
        color: #666666;
      }

      .vip_icon {
        min-width: 122px;
        max-width: 122px;
      }
    }
  }

  .car {
    margin-top: 35px;
    padding: 40px 50px;
    background: #fff;
    border-radius: 30px;

    &_title {
      font-size: 50px;
      font-weight: bold;
    }

    .add_btn {
      margin-top: 30px;
      padding: 25px 30%;
      border-radius: 999px;
      font-size: 36px;
      background: linear-gradient(to right, #4f9df5, #f1f6fd, #bfdbfa);
    }
  }

  .car_box {
    margin-top: 40px;
    padding: 20px 40px;
    background: #fff;
    border-radius: 15px;
    font-size: 50px;

    .car_title {
      font-size: 50px;
      font-weight: bold;
      margin-bottom: 15px;
    }

    .car_2 {
      width: 100%;
      display: flex;
      height: 120px;
      border-radius: 10px;
      align-items: center;
      background: linear-gradient(to right, #dce8ff, #abc8ff);
      padding: 0 40px;
      justify-content: space-between;

      .left {
        display: flex;
        align-items: center;

        .car_icon {
          min-width: 112px;
          max-width: 112px;
          height: 76px;
        }

        .car_name {
          margin-left: 40px;
          font-size: 40px;
          color: #000;
        }
      }

      .text_2 {
        font-size: 40px;
      }
    }
  }

  .more {
    margin-top: 35px;
    padding: 40px 50px;
    background: #fff;
    border-radius: 30px;

    .more_title {
      font-size: 50px;
      font-weight: bold;
    }

    .more_grid {
      margin-top: 30px;

      :deep(.van-grid-item__text) {
        font-size: 42px;
        color: #666666;
      }

      .grid_icon {
        width: 100px;
        height: 100px;
      }
    }
  }

  .content {
    padding: 30px;

    .title_cell {
      display: flex;
      align-items: center;

      .car_name_2 {
        margin: 0 60px;
      }
    }

    .van-icon {
      display: flex;
      align-items: center;
    }

    .van-swipe-cell__right {
      display: flex;
    }

    .add_btn {
      width: 100%;
      padding: 80px 50px 40px 50px;
    }
  }
}
</style>
